import React, {useEffect, useRef, useState} from "react";
import {marked} from "marked";
import 'highlight.js/styles/atom-one-dark.css';
import {createStyles} from "antd-style";
import processMd from "@/components/page/MdPage/processMd.ts";
import {getMd, getMdInfo} from "@/api/MdApi.ts";
import MdSelector from "@/components/page/MdPage/MdSelector.tsx";

const useStyle = createStyles(({css, token}) => {
    const menu = css`
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        font-size: 18px;
        &:after {
            content: '';
            display: block;
            height: 100vh;
            background-color: ${token.colorPrimaryBg};
        }
    `

    const basicLi = css`
        padding: 5px 20px;
        &:nth-child(2n) {
            background-color: ${token.colorPrimaryBg};
        }
        &:nth-child(2n + 1) {
            background-color: ${token.colorPrimaryBgHover};
        }
        &:hover {
            background-color: ${token.colorPrimaryActive};
            cursor: pointer;
        }
    `

    return {
        mdMenu: css`
            ${menu}
            li {
                ${basicLi}
            }
        `,

        selectMenu: css`
            ${menu}
            & > li {
                h5 {
                    background-color: ${token.colorPrimary};
                    font-size: 20px;
                    padding: 20px;
                }

                ul > li {
                    ${basicLi}
                }
            }
        `,

        controller: css`
            display: flex;
            flex-direction: column;
            position: fixed;
            left: 10px;
            bottom: 10px;
            background-color: transparent;
            backdrop-filter: blur(10px) brightness(80%);
            z-index: 10;
            
            button {
                background-color: transparent;
                mix-blend-mode: difference;
                border: 1px solid ${token.colorPrimary};
                font-size: 20px;
                padding: 10px 15px;
            }
        `,

        mdContainer: css`
            height: 100vh;
            width: 100vw;
            overflow-y: auto;
            overflow-x: hidden !important;
            background-color: ${token.colorBgBase};
            font-size: 18px;
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
            line-height: 1.3;

            &:after {
                content: '';
                display: block;
                background-color: ${token.colorBgBase};
                height: 50vh;
            }

            & > * {
                margin: 20px 0;
                font-weight: 500;
            }

            h1 {
                font-size: 40px;
                font-weight: 700;
                background-color: ${token.colorPrimary};
                padding: 20px;
                margin: 30px 0;
            }

            h2 {
                font-size: 35px;
                padding: 10px 0;
                color: ${token.colorPrimaryText};
            }

            h3 {
                font-size: 30px;
                color: ${token.colorPrimaryText};
            }

            h4 {
                font-size: 30px;
            }

            h5 {
                font-size: 25px;
            }

            li {
                padding-left: 20px;

                &:before {
                    content: "◆";
                    color: ${token.colorPrimary};
                    margin-right: 5px;
                }
            }

            pre {
                code {
                    font-family: 'Fira Code', serif;
                    position: relative;
                    padding-top: calc(40px + 1em);

                    .code-type {
                        font-size: 20px;
                        width: 100%;
                        background-color: transparent;
                        backdrop-filter: brightness(120%);
                        position: absolute;
                        padding: 10px;
                        left: 0;
                        top: 0;
                    }
                }
            }

            hr {
                margin-left: -20px;
                width: 100vw;
                border: 1px solid ${token.colorPrimary};
            }

            table {
                display: block;
                margin: 10px 0;
                width: auto;
                white-space: nowrap;
                overflow-x: auto;

                th {
                    padding: 5px 10px;
                }

                td {
                    padding: 5px 10px;
                }

                thead {
                    background-color: ${token.colorPrimary};
                }

                tbody {
                    tr {
                        border-bottom: 1px solid ${token.colorPrimary};

                        td {
                            border-right: 1px solid ${token.colorPrimary};

                            &:last-child {
                                border-right: none;
                            }
                        }
                    }
                }
            }
        `
    }
})

const MaPage: React.FC = () => {
    const mdContainer = useRef<HTMLDivElement>()  // md 容器
    const mdMenu = useRef<HTMLUListElement>()     // md 目录
    const selectMenu = useRef<HTMLUListElement>() // 其他文档目录
    const [containerIndex, setContainerIndex] = useState<number>(-1) // 容器索引，-1为随机
    const [index, setIndex] = useState<number>(-1) // 容器内文档索引，-1为随机
    const [selectMenuData, setSelectMenuData] = useState<[{containerName: string, mdNameList: string[]}]>()

    const {styles} = useStyle();

    useEffect(() => {
        getMd(containerIndex, index).then(response => {
            marked(response.data, {async: true})
                .then(data => processMd(mdContainer.current, mdMenu. current, data))
        })
        getMdInfo().then(response => {
            const data = response.data.data
            setSelectMenuData(data)
        })
    }, [containerIndex, index]);

    const changeMd = (containerIndex: number, index: number) => {
        selectMenu.current.style.display = 'none'
        mdContainer.current.style.overflow = 'auto'
        setContainerIndex(containerIndex)
        setIndex(index)
    }

    return (
        <div>
            <div className={styles.controller}>
                <button onClick={() => {
                    const display = mdMenu.current.style.display;
                    mdMenu.current.style.display = display == 'block' ? 'none' : 'block'
                    if (selectMenu.current.style.display == 'block') {
                        selectMenu.current.style.display = 'none'
                    }
                }}>目录</button>

                <button onClick={() => {
                    const display = selectMenu.current.style.display;
                    selectMenu.current.style.display = display == 'block' ? 'none' : 'block'
                    if (mdMenu.current.style.display == 'block') {
                        mdMenu.current.style.display = 'none'
                    }
                }}>选择文档</button>

                <button onClick={() => {
                    history.back()
                }}>返回</button>
            </div>

            <ul ref={mdMenu} className={styles.mdMenu}></ul>

            <ul ref={selectMenu} className={styles.selectMenu}>
                <MdSelector data={selectMenuData} trigger={changeMd}/>
            </ul>
            <div ref={mdContainer} className={styles.mdContainer}>

            </div>
        </div>
    )
}

export default MaPage;
